<template>
	<view class="packageListPage">
		<!-- 添加悬浮 -->
		<view class="suspension" @click="addpackageCard()">
			<image class="addIcon" src="../../../static/会员卡管理端/addIcon.png" mode=""></image>
		</view>
		<view class="packageListTop">
			<view class="search-content">

				<image class="search-img" src="../../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="搜索商品名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<!-- <image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image> -->
			</view>
			<view class="flex-around margin-top_30rpx">
				<block v-for="(item,index) in navList" :key="index">
					<view :style="{ color: tabIndex == index ? '' : 'rgb(190, 190, 190)' }"
						@click="sell(index,item.value)">
						{{ item.text }}
					</view>
					<!-- 	<view style="color: rgb(190, 190, 190); " class="">
						未上架
					</view> -->
				</block>
			</view>
		</view>
		<view class="padding_30rpx">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list">
					<!-- //:style="{ '--bg-image': `url(${require('../../../static/套餐卡背景/矩形 1591.png')})` }" -->
					<view class="card"> 
						<view class="packageCardArr" :style="{ '--bg-image': `url(${item.style})` }">
							<view class="flex-between "	
								style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20rpx;">

								<image class="avatar" :src="item.logo" mode=""></image>

								<view class=" flex-column-between-start ">
									<text class="font-overflow centerText price font-weight_bold"> {{item.name}}
									</text>
									<text class="font-overflow centerText price font-weight_bold">{{item.desc}}</text>

								</view>
								<view v-if="packAgeStatus == 1" class="rechargeBtn-noListing flex">

								</view>
								<view v-if="packAgeStatus == 2" class="rechargeBtn flex" @click="rechargeFn(item)">
									删除
								</view>

							</view>
							<view class="margin-top_20rpx">
								<text
									class="font-overflow centerText  priceText font-weight_bold margin-right_16rpx">{{'已有'+item.sales_volume+'人付款'}}</text>
								<text
									class="font-overflow centerText  priceText font-weight_bold">充值金额：{{item.sales_amount}}</text>
							</view>

						</view>
						<view class="flex-around margin-top_30rpx" style="color: rgb(102, 102, 102);">
							<view class="flex" @click="packAgeEdit(item)">
								<uni-icons type="compose" size="17"></uni-icons>
								套餐编辑

							</view>
							<view class="flex">
								<!-- <uni-icons type="bars" size="15"></uni-icons>
								管理规格 -->

							</view>
							<view class="flex" @click="removeShelves(item)">
								<uni-icons v-if="packAgeStatus == 1" type="arrow-down" size="16"></uni-icons>
								<uni-icons v-else type="arrow-up" size="16"></uni-icons>
								{{packAgeStatus == 1?'套餐下架':'套餐上架'}}
							</view>
						</view>
					</view>
				</block>
			</mescroll-body>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 0,
				searchVal: null,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				packAgeStatus: 1,
				navList: [{
					text: '出售中',
					value: 1
				}, {
					text: '未上架',
					value: 2
				}]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		methods: {
			async removeShelves(item) {
				uni.showModal({
					title: '提示',
					content: '是否' + (this.packAgeStatus == 1 ? '下架' : '上架') + '套餐',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.upPackageStatus,
								data: {
									id: item.id,
									status: this.packAgeStatus == 1 ? 2 : 1
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast(result.msg)

							} else {
								this.$sun.toast(result.msg)
							}
						} else if (res.cancel) {

						}
					}
				});

			},
			sell(i, item) {
				this.tabIndex = i
				this.packAgeStatus = item
				this.mescroll?.resetUpScroll();

			},
			// packageList
			addpackageCard() {
				this.$sun.navGo('/pages/packageManagement/packageManagement')
			},
			changeInput(name) {
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.packageList,
					data: {
						page: scroll.num,
						limit: 10,
						status: this.packAgeStatus,
						name: this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			packAgeEdit(item) {
				// 套餐编辑
				this.$sun.navGo('/pages/packageManagement/packageManagement', {
					...item
				})
			},
			// 删除套餐卡
			rechargeFn(item) {
				
				uni.showModal({
					title: '提示',
					content: '是否删除该条套餐卡数据',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.upPackageStatus,
								data: {
									id: item.id,
									status: 3
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast(result.msg)

							} else {
								this.$sun.toast(result.msg)
							}
						} else if (res.cancel) {

						}
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.packageListPage {
		.suspension {
			position: fixed;
			right: 15rpx;
			width: 96rpx;
			bottom: 140rpx;
			height: 96rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 126rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 50rpx;
				height: 50rpx;
			}
		}

		.packageListTop {
			background: rgb(255, 255, 255);

			padding: 34rpx;

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}
			}



		}


		.card {
			width: 690rpx;
			height: 316rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;

			background-color: #fff;

			.packageCardArr {
				position: relative;
				margin-top: 32rpx;
				padding: 25rpx 20rpx;
				height: 108px;
				border-radius: 20rpx;
				background-repeat: no-repeat;
				background-size: cover;

				background-image: (var(--bg-image));
                // background-image: url('../../../static/套餐卡背景/矩形 1591.png');

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.rechargeBtn {
					width: 110rpx;
					height: 52rpx;
					border-radius: 20rpx;
                    z-index: 999;
					background: rgb(255, 255, 255);
				}

				.rechargeBtn-noListing {
					width: 110rpx;
					height: 52rpx;
					border-radius: 20rpx;


				}

				.centerText {
					width: 438rpx;
				}

				.price {
					color: #fff;
					font-size: 30rpx;
					font-weight: 700;
				}

				.priceText {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			.packageCardArr::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.1);
				/* 半透明黑色背景 */
			}
		}

	}

	page {
		background: #f6f6f6;
	}
</style>